<ng-container *ngIf="project.Id">
  <div ngClass.lt-md="small-screen" fxLayout="row wrap" fxLayoutAlign="space-between" style="margin-bottom: 1em;">
    <div fxFlex="1 1 50%" fxFlex.lt-md="1 1 100%" style="margin-top: 1em; margin-bottom: 0em;" style="color: #2962FF; font-size: 22px">
      <mat-icon *ngIf="loaded && !project.Public" class="icons">lock_outline</mat-icon>
      <a style="font-size: 22px; text-decoration: none; color: #2962FF;" routerLink="/{{project.Author}}">{{project.Author}}</a> /
      <b>{{project.Name}}</b>
      <span *ngIf="loaded && !project.Public" style="padding-left: 0.5em; padding-right: 0.5em;" class="Label Label--outline v-align-middle">Private</span>
      <span style="padding-left: 0.5em; padding-right: 0.5em;" class="Label Label--outline v-align-middle">v{{ project?.Version ? project?.Version : '0.0.1'}}</span>
    </div>
    <div fxFlex="none" fxFlex.lt-md="1 1 100%">
      <app-project-status #status [author]="project.Author" [projectName]="project?.Name"></app-project-status>
      <app-star-button [project]="project" [showCount]="true"></app-star-button>
    </div>
  </div>

  <mat-tab-group class="tab-group" [selectedIndex]="selectedIndex" #tabGroup (selectedIndexChange)="selectedIndexChange(tabGroup)">
    <mat-tab [attr.data-pid]="'code'" mat-ink-ripple="yellow;">
      <ng-template mat-tab-label>
        Project
      </ng-template>
      <app-code *ngIf="project && project.Id" (onProjectSaved)="refresh()" [project]="project"></app-code>
    </mat-tab>

    <mat-tab [attr.data-pid]="'builds'">
      <ng-template mat-tab-label>
        <span>Builds &nbsp;</span>
        <span id="build-tab-icon-success" class="success" *ngIf="lastBuild && lastBuild.Success">
          <mat-icon>done</mat-icon>
        </span>
        <span id="build-tab-icon-fail" class="failed" *ngIf="lastBuild && !lastBuild.InProgress && !lastBuild.Success" align="start">
          <mat-icon>close</mat-icon>
        </span>
        <span id="build-tab-icon-inprogress" class="inprogress" *ngIf="lastBuild && lastBuild.InProgress">
          <mat-progress-spinner class="example-margin" [color]="color" [mode]="mode" [value]="value" [diameter]="22" [strokeWidth]="3"></mat-progress-spinner>
        </span>
      </ng-template>
      <div style="margin-top: 2em;">
        <app-builds [project]="project"></app-builds>
      </div>
    </mat-tab>

    <mat-tab [attr.data-pid]="'issues'">
      <ng-template mat-tab-label>
        Issues
      </ng-template>
      <app-issues *ngIf="!issueId && project?.Id?.length > 0" [project]="project"></app-issues>
      <app-issue *ngIf="issueId" [issueId]="issueId" [author]="project.Author" [projectName]="projectName"></app-issue>
    </mat-tab>

    <mat-tab [attr.data-pid]="'stars'">
      <ng-template mat-tab-label>
        Stars
      </ng-template>
      <mat-card style="margin-top: 0.5em" *ngIf="!project.Starrers">
        No stars yet.
      </mat-card>
      <div style="padding-bottom: 1em;" fxLayout="row wrap" fxLayoutAlign="space-between" *ngIf="project.Starrers">
        <mat-card fxFlex="1 1 32%" style="margin-top: 2em;" *ngFor="let user of project.Starrers">
          <div style="padding-bottom: 1em;padding-top: 1em">
            <a style="color: #2962FF" routerLink="/{{user.Nick}}">
              <font size="4">{{user.Nick}}</font>
            </a>
            <div style="padding-top: 0.5em;">
              Joined {{user.CreatedAt | amTimeAgo}}
            </div>
          </div>
        </mat-card>
      </div>
    </mat-tab>

    <mat-tab *ngIf="us.user.Nick === project.Author" [attr.data-pid]="'logs'">
      <ng-template mat-tab-label>
        Logs
      </ng-template>
      <app-logs [project]="project"></app-logs>
    </mat-tab>

    <mat-tab *ngIf="us.user.Nick === project.Author" [attr.data-pid]="'settings'">
      <ng-template mat-tab-label>
        Settings
      </ng-template>
      <app-settings [project]="project" (onProjectSaved)="refresh()"></app-settings>
    </mat-tab>


    <mat-tab *ngIf="us.user.Nick === project.Author" [attr.data-pid]="'sql'">
      <ng-template mat-tab-label>
        SQL database
      </ng-template>
      <app-sql [project]="project"></app-sql>
    </mat-tab>

  </mat-tab-group>
</ng-container>
